<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FLAC 音乐播放器</title>
  <link rel="stylesheet" href="player.css">
</head>
<body>
  <div class="loading-overlay" id="loading-overlay">
    <div class="loading-spinner"></div>
    <p>正在加载...</p>
  </div>

  <div class="container" id="main-container">
    <header class="header">
      <div class="logo-title">
        <canvas id="header-logo" width="40" height="40"></canvas>
        <h1>FLAC 音乐播放器</h1>
      </div>
      <div class="header-actions">
        <button id="refresh-btn" class="icon-btn" title="刷新">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"></path>
          </svg>
        </button>
      </div>
    </header>

    <div class="content">
      <div class="search-bar">
        <form id="search-form">
          <input id="search-input" type="text" placeholder="搜索歌曲/歌手/专辑" autocomplete="off" />
          <button type="submit" class="icon-btn" title="搜索">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="11" cy="11" r="8"></circle>
              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
          </button>
        </form>
      </div>

      <div id="list-container" class="list-container empty">
        <div id="list-loading" class="list-loading hidden">加载中...</div>
        <div id="list-error" class="list-error hidden">加载失败，请重试</div>
        <ul id="result-list" class="result-list"></ul>
      </div>

      <div class="player-bar" id="player-bar">
        <div class="now-playing" id="now-playing">未在播放</div>
        <audio id="audio" controls preload="none"></audio>
      </div>
    </div>

    <div class="unlock-prompt hidden" id="unlock-prompt">
      <div class="unlock-modal">
        <h2>需要解锁</h2>
        <p>请先在插件弹窗中输入解锁码</p>
        <button id="open-popup-btn" class="btn btn-primary">打开插件</button>
      </div>
    </div>
  </div>

  <script src="logo-generator.js"></script>
  <script src="player.js"></script>
</body>
</html>

